<template>
    <div class="parameter-container">
        <!-- 城市规模滑块 -->
        <div class="slider-item">
            <span class="slider-label">城市规模</span>
            <el-slider v-model="citySize" :min="1" :max="100" :step="1"/>
            <div class="slider-mark">
                <span>小</span>
                <span>大</span>
            </div>
        </div>

        <!-- 马车速度滑块 -->
        <div class="slider-item">
            <span class="slider-label">马车速度</span>
            <el-slider v-model="carriageSpeed" :min="1" :max="100" :step="1"/>
            <div class="slider-mark">
                <span>快</span>
                <span>慢</span>
            </div>
        </div>

        <!-- 谷物价格滑块 -->
        <div class="slider-item">
            <span class="slider-label">谷物价格</span>
            <el-slider v-model="grainPrice" :min="1" :max="100" :step="1"/>
            <div class="slider-mark">
                <span>低</span>
                <span>高</span>
            </div>
        </div>

        <!-- 河流操作按钮 -->
        <div class="button-group">
            <el-button type="primary" @click="addRiver">添加河流</el-button>
            <el-button type="danger" @click="removeRiver">删除河流</el-button>
        </div>

        <!-- 卫星城操作按钮 -->
        <div class="button-group">
            <el-button type="primary" @click="addSatelliteCity">添加卫星城</el-button>
            <el-button type="danger" @click="removeSatelliteCity">删除卫星城</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElSlider, ElButton } from 'element-plus'

// 滑块数据
const citySize = ref(1)
const carriageSpeed = ref(1)
const grainPrice = ref(1)

// 按钮方法
const addRiver = () => {
    console.log('添加河流')
    // 这里添加实际逻辑
}

const removeRiver = () => {
    console.log('删除河流')
    // 这里添加实际逻辑
}

const addSatelliteCity = () => {
    console.log('添加卫星城')
    // 这里添加实际逻辑
}

const removeSatelliteCity = () => {
    console.log('删除卫星城')
    // 这里添加实际逻辑
}
</script>

<style scoped>
.parameter-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    width: 100%;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.5rem;
    overflow: hidden;
}

.slider-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.slider-label {
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    width: 100%;
}

.slider-mark {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 1rem;
    color: #ffffff;
}

.button-group {
    display: flex;
    gap: 0.625rem;
    /* 10px */
    justify-content: center;
    width: 100%;
}

:deep(.el-button) {
  width: 8rem;
  height: 36px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
}
</style>